<template>
  <div class="sidebar">
    <div class="logo-details">
      <el-icon><Van /></el-icon>
      <span class="logo_name">大件运输系统</span>
    </div>


    <ul class="nav-links">
      <li>
        <b @click="addTab('个人资料')">
          <el-icon><UserFilled /></el-icon>
<!--          <i class='bx bx-grid-alt' ></i>-->
          <span class="link_name">个人资料</span>
        </b>
        <ul class="sub-menu blank">
          <li><b class="link_name" @click="addTab('个人资料')">个人资料</b></li>
        </ul>
      </li>


      <li>
        <b @click="addTab('审核路线')">
<!--          <i class='bx bx-pie-chart-alt-2' ></i>-->
          <el-icon><Platform /></el-icon>
          <span class="link_name">审核路线</span>
        </b>
        <ul class="sub-menu blank">
          <li><b class="link_name" @click="addTab('审核路线')">审核路线</b></li>
        </ul>
      </li>

      <li>
        <b @click="addTab('历史审核记录')">
          <el-icon><List /></el-icon>
<!--          <i class='bx bx-line-chart' ></i>-->
          <span class="link_name">历史审核记录</span>
        </b>
        <ul class="sub-menu blank">
          <li><b class="link_name" @click="addTab('历史审核记录')">历史审核记录</b></li>
        </ul>
      </li>



      <li>
        <b @click="addTab('系统通知')">
          <el-icon><Promotion /></el-icon>

          <span class="link_name">系统通知</span>
        </b>
        <ul class="sub-menu blank">
          <li><b class="link_name" @click="addTab('系统通知')">系统通知</b></li>
        </ul>
      </li>



      <li>
        <div class="profile-details">
          <div class="profile-content">
<!--          头像  <img src="image/profile.jpg" alt="profile">-->
            <el-avatar class="nav-avatar"   :src="pathUrl+'/getImage?path='+touxiang"/>
            <div class="profile_name">{{ name }}</div>
          </div>



        </div>
      </li>

    </ul>
  </div>
  <section class="home-section">
    <el-container>
                <el-header class="home-header">
                      <div class="home-head">
                        <el-icon class="bx-menu"><Fold /></el-icon>
                        审核员首页
                      </div>
                      <div class="home-tabs">

                          <el-tag
                              v-for="item in tagData"
                              :key="item.label"
                              :type="item.type"
                              class="mx-1"
                              :effect="item.effect"
                              closable
                              @click="choose(item)"
                              aria-checked="true"
                              @close="remove(item)"
                          >
                            {{item.label}}
                          </el-tag>

                          <div class="xxk">
                            <el-button link type="primary" @click="backToLogin">
                              <el-icon><SwitchButton /></el-icon>
                              退出登录
                            </el-button>
                          </div>
                        <div class="xxk">
                          <el-button link type="primary" @click="closeAll">
                            <el-icon><Remove /></el-icon>
                            关闭全部
                          </el-button>
                        </div>
                      </div>
                </el-header>
                <el-main class="home-main">
                  <div class="component-main">
                    <component @updata="change" v-bind:is="tagData[currentTagIndex].component" v-if="tagsNum>0"/>
                  </div>

                </el-main>
              </el-container>
  </section>

</template>
<script>
import pathUrl from "@/main";
import personalParent from "@/router/auditor/personal/personalParent";
import setPassword from "@/router/auditor/personal/setPassword";
import inform from "@/router/auditor/inform";
import historyRecord from "@/router/auditor/history/historyRecord";
import routePage from "@/router/auditor/route/routePage";
import router from "@/router";
export default {
  name:"auditorView",
  mounted() {
    let userjson=sessionStorage.getItem('user')
    let user=JSON.parse(userjson)
    this.touxiang=user.image
    this.name=user.realName
    //新加的
    let arrow = document.querySelectorAll(".arrow");
    for (var i = 0; i < arrow.length; i++) {
      arrow[i].addEventListener("click", (e)=>{
        let arrowParent = e.target.parentElement.parentElement;
        arrowParent.classList.toggle("showMenu");
      });
    }

    let sidebar = document.querySelector(".sidebar");
    let sidebarBtn = document.querySelector(".bx-menu");
    console.log(sidebarBtn);
    sidebarBtn.addEventListener("click", ()=>{
      sidebar.classList.toggle("close");
    });
  },
  components:{

    // eslint-disable-next-line vue/no-unused-components
    inform,

    // eslint-disable-next-line vue/no-unused-components
    historyRecord,

    // eslint-disable-next-line vue/no-unused-components
    routePage,

    // eslint-disable-next-line vue/no-unused-components
    personalParent,

    // eslint-disable-next-line vue/no-unused-components
    setPassword
  },
  computed:{
  },
  data(){
    return{
      menuIndex:'',
      pathUrl,
      touxiang:"",
      name:'',
      tagsNum:1,
      currentTagIndex:0,
      tagData:[
        {
          index:0,
          label:'个人资料',
          type:'primary',
          component: personalParent,
          effect:'light'
        },
      ],
    }
  },
  methods:{
    change(){
      let userjson=sessionStorage.getItem('user')
      let user=JSON.parse(userjson)
      this.touxiang=user.image
      this.name=user.realName
    },
    closeAll(){
        this.tagData.length=0
        this.currentTagIndex=0
        this.tagsNum=0
    },
    remove(a){
      if(a.index<=this.currentTagIndex){
        this.tagsNum-=1;
        this.tagData.splice(a.index,1);
        for(let i=0;i<this.tagsNum;i++){
          this.tagData[i].index=i;
        }
        if(this.currentTagIndex===0){
          this.choose(this.tagData[this.currentTagIndex])
        }else{
          this.choose(this.tagData[this.currentTagIndex-1])
        }
      }else if(this.tagsNum===1){
        this.closeAll()
      }else{
        this.tagsNum-=1;
        this.tagData.splice(a.index,1);
        for(let i=0;i<this.tagsNum;i++){
          this.tagData[i].index=i;
        }
      }
    },
    choose(a){
      this.currentTagIndex=a.index
      for(let i=0;i<this.tagsNum;i++){
        if(this.tagData[i].index===a.index){
          this.tagData[i].effect='dark'
        }else {
          this.tagData[i].effect='light'
        }
      }
      this.menuIndex=this.tagData[this.currentTagIndex].label
    },
    addTab(a){
      let flag=1;
      for(let i=0;i<this.tagsNum;i++){
        if(this.tagData[i].label===a){
          this.choose(this.tagData[i])
          flag=0;
        }
      }
      if(flag===0){
        return
      }else{
        switch (a){
          case '系统通知':
            this.tagData.push({
              index:this.tagsNum,
              label:'系统通知',
              type:'primary',
              component: inform,
              effect:'light'
            })
            break;
          case '个人资料':
            this.tagData.push({
              index:this.tagsNum,
              label:'个人资料',
              type:'primary',
              component: personalParent,
              effect:'light'
            })
            break;
          case '修改密码':
            this.tagData.push({
              index:this.tagsNum,
              label:'修改密码',
              type:'primary',
              component: setPassword,
              effect:'light'
            })
            break;
          case '审核路线':
            this.tagData.push({
              index:this.tagsNum,
              label:'审核路线',
              type:'primary',
              component: routePage,
              effect:'light'
            })
            break;
          case '历史审核记录':
            this.tagData.push({
              index:this.tagsNum,
              label:'历史审核记录',
              type:'primary',
              component: historyRecord,
              effect:'light'
            })
            break;
        }
        this.tagsNum+=1;
      }
      for(let i=0;i<this.tagsNum;i++){
        if(this.tagData[i].label===a){
          this.choose(this.tagData[i])
        }
      }
    },
    backToLogin:function (){
      sessionStorage.clear()
      router.push('/login')
    },
  }
}
</script>
<style scoped>
.xxk{
  float:right;
  width: 80px;
  height:100%;
  background-color: white;
  box-shadow: #999999;
  border-left: #999999 1px solid;
  text-align: center;
}
.mx-1{
  cursor:pointer;
  height: 28px;
  margin-left: 2px;
}
.home-head{
  height: 60px;
  background-color: #2a3648;
  text-align: center;
  line-height: 60px;
  font-size: 30px;
  color: white;
}
.home-head .el-icon{
  position: absolute;
  left: 20px;
  top:12px;
}
.home-tabs{
  height: 30px;
  padding: 1px 1px 1px 1px;
  background-color: rgb(238, 239, 241);
  line-height: 30px;
  text-align: left;
}
.home-header{
  margin: 0px;
  padding: 0px;
  height: 90px;
}
.el-container{
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
.el-aside{
  margin: 0px;
  padding: 0px;
}
.el-main{
  margin: 0px;
  padding: 0px;
}
.home-main{

  width: 100%;
  height: 100%;
  background-color: rgba(140, 147, 157, 0.38);
}
.home-main .component-main{
  position: relative;
  left: 1%;
  top:2%;
  width: 98%;
  height: 96%;
  background-color: white;
}


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 260px;
  background: #11101d;
  z-index: 100;
  transition: all 0.5s ease;
}
.sidebar.close{
  width: 78px;
}
.sidebar .logo-details{
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
}
.sidebar .logo-details .el-icon{
  font-size: 30px;
  color: #fff;
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
}
.sidebar .logo-details .logo_name{
  position: fixed;
  left: 70px;
  display: block;
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  transition: 0.3s ease;
  transition-delay: 0.1s;
}
.sidebar.close .logo-details .logo_name{
  display: none;
  transition-delay: 0s;
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links{
  height: 100%;
  padding: 30px 0 150px 0;
  overflow: auto;
}
.sidebar.close .nav-links{
  overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar{
  display: none;
}
.sidebar .nav-links li{
  position: relative;
  list-style: none;
  transition: all 0.4s ease;
}
.sidebar .nav-links li:hover{
  background: #1d1b31;
}
.sidebar .nav-links li .iocn-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar.close .nav-links li .iocn-link{
  display: block
}
.sidebar .nav-links li .el-icon{
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.sidebar .nav-links li.showMenu .el-icon.arrow{
  transform: rotate(-180deg);
}
.sidebar.close .nav-links .el-icon.arrow{
  display: none;
}
.sidebar .nav-links li b{
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.sidebar .nav-links li b .link_name{
  position: fixed;
  left: 70px;
  display: block;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  transition: all 0.4s ease;
}
.sidebar.close .nav-links li b .link_name{
  display: none;
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li .sub-menu{
  padding: 6px 6px 14px 80px;
  margin-top: -10px;
  background: #1d1b31;
  display: none;
}
.sidebar .nav-links li.showMenu .sub-menu{
  display: block;
}
.sidebar .nav-links li .sub-menu b{
  color: #fff;
  font-size: 15px;
  padding: 5px 0;
  white-space: nowrap;
  opacity: 0.6;
  transition: all 0.3s ease;
  cursor: pointer;
}
.sidebar .nav-links li .sub-menu b:hover{
  opacity: 1;
}
.sidebar.close .nav-links li .sub-menu{
  position: absolute;
  left: 100%;
  top: -10px;
  margin-top: 0;
  padding: 10px 20px;
  border-radius: 0 6px 6px 0;
  opacity: 0;
  display: block;
  pointer-events: none;
  transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu{
  top: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
}
.sidebar .nav-links li .sub-menu .link_name{
  display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name{
  font-size: 18px;
  opacity: 1;
  display: block;
}
.sidebar .nav-links li .sub-menu.blank{
  opacity: 1;
  pointer-events: auto;
  padding: 3px 20px 6px 16px;
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank{
  top: 50%;
  transform: translateY(-50%);
}
.sidebar .profile-details{
  position: fixed;
  bottom: 0;
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1d1b31;
  padding: 6px 0;
  transition: all 0.5s ease;
}
.sidebar.close .profile-details{
  background: none;
}
.sidebar.close .profile-details{
  width: 78px;
}
.sidebar .profile-details .profile-content{
  display: flex;
  align-items: center;
}
.sidebar .profile-details .el-avatar{
  height: 52px;
  width: 52px;
  object-fit: cover;
  border-radius: 16px;
  margin: 0 14px 0 12px;
  background: #b4b2c7;
  transition: all 0.5s ease;
}
.sidebar.close .profile-details .el-avatar{
  padding: 10px;
}
.sidebar .profile-details .profile_name{
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;

}
.sidebar.close .profile-details .el-icon,
.sidebar.close .profile-details .profile_name{
  display: none;
}

.home-section{
  position: relative;
  background: #E4E9F7;
  height: 100vh;
  left: 260px;
  width: calc(100% - 260px);
  transition: all 0.5s ease;
}
.sidebar.close ~ .home-section{
  left: 78px;
  width: calc(100% - 78px);
}

.home-section .home-header .home-head .bx-menu{
  color: #ffffff;
  font-size: 35px;
}
.home-section .home-header .home-head .bx-menu{
  margin: 0 15px;
  cursor: pointer;
}

</style>